<!DOCTYPE html>
<html lang="en-US" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head th:replace="_fragment :: head(~{::title})">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>OICQ新用户</title>
	<meta name="description" content="Cabe - Responsive Multi-purpose HTML5 Template">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<!-- STYLESHEETS -->
	<link href="../static/css/Montserrat.css" rel="stylesheet">
	<link rel="stylesheet" href="../static/css/owl.carousel.min.css" type="text/css" media="all">
	<link rel="stylesheet" href="../static/css/owl.theme.default.min.css" type="text/css" media="all">

	<link rel="stylesheet" href="../static/css/themify-icons.css">

	<link rel="stylesheet" href="../static/css/main.min.css" type="text/css" media="all">
<!--	<link rel="stylesheet" href="../static/css/dark.css">-->



</head>

<body>
<main class="bg-grey" th:style="'background-image:url('+@{/images/bg_night.JPG}+')'" style="background-image: url(../static/images/bg_night.JPG);">
<div id="app" class="d-flex align-items-center mx-auto login-form">
			<div class="container">
				<div class="card">
					<div class="card-body p-5">
						<div>
							<h3 class="title-text mb-5"><b>OICQ注册</b></h3>
							<p style="color: limegreen" v-show="register_success" v-text="success_msg"></p>
							<div class="input-group mb-2">
								<i class="ti-user"></i>
			                	<input class="form-control form-control-lg" v-model="nickname" type="text" placeholder="昵称">
			              	</div>
							<p style="color: red" v-show="nickname_check" v-text="nickname_msg"></p>
			              	<div class="input-group mb-2">
			              		<i class="ti-email"></i>
			                	<input class="form-control form-control-lg" v-model="email" type="email" placeholder="邮箱" required="">
			              	</div>
							<p style="color: red" v-show="email_check" v-text="email_msg"></p>
							<p style="color: limegreen" v-show="code_send" v-text="send_msg"></p>
			              	<div class="input-group mb-2">
			              		<i class="ti-lock"></i>
			                	<input class="form-control form-control-lg" v-model="password" type="password" placeholder="密码" required="">
			              	</div>
							<p style="color: red" v-show="password_check" v-text="password_msg"></p>
							<div class="input-group mb-3">
								<input class="form-control form-control-lg" v-model="verifyCode" placeholder="验证码" required="">
								<button type="button" v-on:click="getVerifyCode" class="btn  btn-primary mt-2"><b>获取验证码</b></button>
							</div>
							<p style="color: red" v-show="code_check" v-text="code_msg"></p>
			              	<button v-on:click="postUser" class="btn btn-block btn-lg btn-primary mt-2" type="button"><b>提交</b></button>
			              	<p class="mt-4 text-center">已经有账号了? <a class="link-primary" th:href="@{/login}" href="login.html">点击这里登录</a>.</p>
			            </div>
					</div>
				</div>
			</div>			
		</div>
	</main>


	<!-- SCRIPTS -->
	<th:block th:replace="_fragment :: javascript">
		<script src="../static/js/plugin.js"></script>
		<script src="../static/js/main.min.js"></script>
	</th:block>
	<script>
		let app = new Vue({
			el:"#app",
			data:{
				nickname:"",
				email:"",
				password:"",
				verifyCode:"",
				nickname_check:false,
				email_check:false,
				password_check:false,
				code_check:false,
				code_send:false,
				register_success:false,
				email_msg:"邮箱格式貌似不太对哦~",
				password_msg:"密码请至少3位哦",
				code_msg:"你的验证码腻~",
				nickname_msg: "取一个帅气的昵称吧!",
				success_msg:"注册成功啦~请返回登录",
				send_msg:"验证码已经发送至您的邮箱，请注意查收~"
			},
			methods:{
				getVerifyCode(){
					let reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
					if(this.email==="" || !reg.test(this.email)){
						this.email_check = true;
						return;
					}
					this.email_check = false;
					let that = this;
					axios.post('/getVerifyCode',{email:that.email})
							.then(function (response){
								if(response.data.status===100){
									that.email_msg = response.data.msg;
									that.email_check = true;
								}else {
									that.code_send = true;
								}
							})
							.catch(function (error){
								console.log(error);
							})
				},
				postUser(){
					if(this.nickname===""){
						this.nickname_check = true;
						return;
					}
					this.nickname_check = false;
					let reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
					if(this.email==="" || !reg.test(this.email)){
						this.email_check = true;
						return;
					}
					this.email_check = false;
					if(this.password.length<3){
						this.password_check = true;
						return;
					}
					if(this.verifyCode===""){
						this.code_check = true;
						return;
					}
					this.code_check = false;
					this.password_check = false;
					let that = this;
					axios.post('/userPost',{
						nickname: that.nickname,
						email:that.email,
						password: that.password,
						verifyCode: that.verifyCode
					})
					.then(function (response){
						if(response.data.status===100){
							that.code_msg = response.data.msg;
							that.code_check = true;
						}else {
							that.code_send = false;
							that.register_success = true;
							sessionStorage.setItem("email",that.email);
							sessionStorage.setItem("password",that.password);
						}
					})
					.catch(function (error){
						console.log(error);
					})
				}
			}
		})
	</script>
</body>

</html>
